<template>
	<AppHeader :title="title" :banAnimate="true" backgroundColor="rgba(0,0,0,0)" titleColor="#ffffff">
		<template #left>
			<img @click="onClickLeft" src="@/assets/images/icon-arrow-left-white.png" width="9" height="18" />
		</template>
	</AppHeader>
	<div class="container" v-if="listeningSuccessData">
		<div class="top-bg">
			<div class="score">{{listeningSuccessData.score}}</div>
			<div class="comments">得分率{{(listeningSuccessData.score/30).toFixed(2)*100}}%</div>
		</div>
		<div class="score-details">
			<div class="box">
				<van-cell title="总分" value="30" />
				<van-cell title="作答用时" :value="listeningSuccessData.use_time" />
			</div>
			<div class="main">
				<van-collapse v-model="activeNames">
					<van-collapse-item :name="index" v-for="(item,index) in listeningList" :key="index">
						<template #title>
							<div class="titleleft">
								{{ item.templateSettings.content }}
								（<span>
									<i
										:class="autoScoreColor(questionStemScoreMy(item),questionStemScore(item))">{{ questionStemScoreMy(item) }}分</i>
									/{{questionStemScore(item) }}分）
								</span>
							</div>
						</template>
						<div class="questionsBox">
							<div v-if="item.questions[0].type==5">
								<div v-for="ctItem in item.questions[0].trunk.body.split('\n')" style="margin: 10px 0;">
									{{ctItem}}
								</div>
							</div>
							<div v-if="item.questions[0].type==5" style="border-bottom: 2px solid #f7f7f7;">
								<audioPlayer :audioSrc="resmainUrl + item.questions[0].trunk.attachments[0].url">
								</audioPlayer>
							</div>
							<div :class="childIndex!=(item.questions[0].children.length-1)?'questionsItem borderBottom':'questionsItem'"
								v-for="(childItem,childIndex) in item.questions[0].children" :key="childIndex">
								<div style="margin: 10px 0;padding: 0 10px;" :class="childItem.select==null?'red':''" v-if="item.questions[0].type!=3">
									{{childItem.select!=null?optionsMap[childItem.select]:'未作答'}}
									( <span
										:class="childItem.questionRefSorce?'green':'red'">{{childItem.questionRefSorce}}分</span>
									/{{childItem.score}}分)
								</div>
								<div style="margin: 10px 0;padding: 0 10px;">{{childItem.trunk.body}}</div>
								<div v-if="item.questions[0].type==3">
									<div v-for="(optionItem,optionIndex) in childItem.options" style="padding: 10px 0px;">
										{{optionItem.sort}}.<span style="padding: 5px;border-bottom: 1px solid #bdb9b8;">{{(optionIndex+1)}}</span>
									</div>
								</div>
								<div v-for="(attItem,attIndex) in childItem.trunk.attachments">
									<div v-if="attItem.fileType==2">
										<audioPlayer :audioSrc="resmainUrl + attItem.url"></audioPlayer>
									</div>
									<div v-if="attItem.fileType==1">
										<img :src="resmainUrl + attItem.url" style="width: 100%;" />
									</div>
								</div>
								<div v-for="(optionItem,optionIndex) in childItem.options" style="padding: 0 10px;">
									<div style="display: flex;align-items: center;margin-bottom: 20px;margin-top: 20px;"
										v-if="item.questions[0].type!=3">
										<div :class="childItem.select == optionIndex?'select active':'select'">
											{{ optionsMap[optionIndex] }}
										</div>
										<span v-if="optionItem.value[0].body">{{ optionItem.value[0].body }}</span>
									</div>
									<div style="padding:10px 0;border-top: 2px solid #f7f7f7;"
										v-if="item.questions[0].type==3">
										<div style="margin: 10px 0;" :class="optionItem.write==null?'red':''" >
											{{optionItem.write!=null?optionItem.write:'未作答'}}
											<span v-if="optionItem.write!=null">
												( <span
													:class="optionItem.questionRefSorce?'green':'red'">{{optionItem.questionRefSorce}}分</span>
												/{{optionItem.score}}分)
											</span>
										</div>
										<div>
											<div >参考答案</div>
											<div class="green" style="margin-top: 4px;">{{referenceAnswer(optionItem)}}</div>
										</div>
										<!-- <span v-if="optionItem.write">{{ optionItem.write }}</span> -->
									</div>
								
									<img v-if="!optionItem.value[0].body"
										:src="resmainUrl + optionItem.value[0].attachments[0].url"
										style="width: 60px;height: 60px;margin-top: 10px;" />
								</div>
								<div v-if="item.questions[0].type!=3">参考答案</div>
								<div class="green" v-if="item.questions[0].type!=3">{{optionsMap[childItem.answer]}}</div>
							</div>
						</div>
					</van-collapse-item>

				</van-collapse>

			</div>
		</div>
	</div>
</template>

<script setup>
	import AppHeader from "@/components/AppHeader.vue";
	import {
		useRoute,
		useRouter
	} from "vue-router";
	import {
		ref,
		onMounted,
		onUnmounted,
	} from "vue";
	const router = useRouter();
	const route = useRoute();
	const title = route.query.title;
	const listeningSuccessData = ref()
	const activeNames = ref([])
	const listeningList = ref([])
	const resmainUrl = ref('https://d-xueer.bigchun.com/file/listening/res/')
	const optionsMap = ["A", "B", "C", "D", "E", "F", "G"]; //题目选项映射
	const onClickLeft = () => {
		router.back();
	};
	
	//格式化参考答案
	const referenceAnswer = (item) => {
	try {
		// 尝试将字符串解析为JSON数组  
		const parsed = JSON.parse(item.value[0].body);
		// 如果解析成功且是数组，则返回该数组  
		if (Array.isArray(parsed)) {
			return parsed.join("/");
		}
		return item.value[0].body;
	} catch (e) {
		// 如果解析失败（即不是有效的JSON），将原始字符串返回  
		return item.value[0].body;
	}
	}
	
	const questionStemScore = (item) => {
		let sumScore = 0
		for (var i = 0; i < item.questions[0].children.length; i++) {
			sumScore += item.questions[0].children[i].score
		}
		return sumScore.toFixed(2)
	}
	const questionStemScoreMy = (item) => {
		let sumScore = 0
		for (var i = 0; i < item.questions[0].children.length; i++) {
			sumScore += item.questions[0].children[i].questionRefSorce
		}
		return sumScore.toFixed(2)
	}

	const autoScoreColor = (my, all) => {
		if (my == all) {
			return 'green'
		} else {
			return 'red'
		}
	}

	onMounted(() => {
		let listeningSuccessJSON = localStorage.getItem("listeningSuccessData")
		listeningSuccessData.value = JSON.parse(listeningSuccessJSON)
		listeningList.value = listeningSuccessData.value.json
		console.log(listeningSuccessData.value)
	});
</script>

<style lang="scss" scoped>
	.borderBottom {
		border-bottom: 2px solid #f7f7f7;
	}

	.red {
		color: #ec5054;
	}

	.green {
		color: #67c259;
	}

	.select {
		width: 30px;
		height: 30px;
		margin-right: 20px;
		text-align: center;
		line-height: 30px;
		background-color: #f0eceb;
		color: #bdb9b8;
		border-radius: 50%;
		font-size: 16px;
	}

	.active {
		background-color: #0cb76c;
		color: #ffffff;
	}



	.container {
		height: 100%;
		background-color: #f5f5f5;
		position: relative;
		overflow-y: auto;

		.main {
			background-color: #fff;
			height: auto;
			border-radius: 15px;
			padding: 10px;
			padding-bottom: 20px;

			.audio {
				height: 20px;
				width: 100px;
			}
		}

		.top-bg {
			height: 180px;
			padding-top: 90px;
			background: url("../../assets/images/listening/work-bg.png") center no-repeat;
			background-size: cover;
			text-align: center;
			color: #fff;

			.score {
				font-size: 66px;
				margin-bottom: 20px;
			}

			.comments {
				font-size: 18px;
				margin-bottom: 30px;
				letter-spacing: 2px;
			}

			.success-txt {
				font-size: 18px;
				display: flex;
				align-items: center;
				justify-content: center;

				span {
					margin-right: 10px;
				}

				img {
					width: 18px;
					height: 18px;
				}
			}
		}

		.score-details {
			width: calc(100% - 20px);

			.box {
				background-color: #ffffff;
				border-radius: 15px;
				margin-bottom: 10px;
				font-size: 14px;
				padding: 10px 0;

				.box-item {
					margin-bottom: 20px;
					padding: 10px 10px 20px 10px;

					span {
						display: block;
					}

					.txt-score {
						span {
							color: red;
							display: inline-block;
						}
					}

					p {
						margin: 0;
						font-weight: bold;
					}

					&.txts {
						padding: 10px;
					}

					.txt {
						margin: 10px 0;
						line-height: 2;
						font-weight: bold;
					}
				}
			}

			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			top: 280px;
		}
	}
</style>